
<ion-header>

  <ion-navbar color="dark">
    <ion-title>{{chatUserNickName}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <div class="message-wrap" >

    <div class="message" *ngFor="let msg of messageList" [class.left]="msg.from.username===chatUserPhone"
         [class.right]="msg.from.username===userInfo.phone">
      <img  *ngIf="msg.from.username===userInfo.phone" src="{{userFacePath}}/{{userInfo.userFace}}" class="user-img">
      <img (press)="addContactPerson(userInfo.id,chatUserId)" *ngIf="msg.from.username===chatUserPhone" src="{{userFacePath}}/{{chatUserFace}}" class="user-img">
      <!--<ion-spinner name="dots" *ngIf="正在发送"></ion-spinner>-->
      <div class="msg-detail">
        <div class="msg-info">
          <p *ngIf="msg.from.username===userInfo.phone">{{userInfo.nickname}}&nbsp;{{formatDate(msg.createTime)}}</p>
          <p *ngIf="msg.from.username===chatUserPhone">{{chatUserNickName}}&nbsp;{{formatDate(msg.createTime)}}</p>
        </div>
        <div class="msg-content">
          <p class="line-breaker">{{msg.text}}</p>
        </div>
      </div>
    </div>

    <!--<div class="message" [class.left]="1 === 2"-->
         <!--[class.right]="1=== 1">-->
      <!--<img src="http://file.yixiaoy.cn/img/userface/14.jpg" class="user-img">-->
      <!--&lt;!&ndash;<ion-spinner name="dots" *ngIf="正在发送"></ion-spinner>&ndash;&gt;-->
      <!--<div class="msg-detail">-->
        <!--<div class="msg-info">-->
          <!--<p>小哥哥&nbsp;{{formatDate(time)}}</p>-->
        <!--</div>-->
        <!--<div class="msg-content">-->
          <!--<p class="line-breaker">我很好 OK</p>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->


  </div>
</ion-content>

<ion-footer no-border>
  <ion-grid class="input-wrap">
    <ion-row>
      <ion-col col-10>
        <ion-textarea
          #chatInput
          [(ngModel)]="sendMessage"
          (keyup.enter)="SendMessage()"
          (focus)="focus()"
          placeholder="输入内容" [(ngModel)]="sendMessage"></ion-textarea>
      </ion-col>
      <ion-col col-2>
        <button ion-button clear ion-only item-right (click)="SendMessage()">
          <ion-icon name="send"></ion-icon>
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>
